<template>
  <!-- 菌落形态 -->
  <div id="colonialMorphology">
    <vxe-toolbar perfect>
      <template #buttons>
        <vxe-input
            type='search'
            v-model='form.searchValue'
            clearable class='vxeInputSearch'
            @search-click='handleSearch'
            @clear='handleSearch'
            @keyup.enter.native='handleSearch'
            placeholder='关键字查询'></vxe-input>
        <vxe-button
            type='text'
            class='button-blue'
            @click='findColonialMorphologyList'
            con='vxe-icon-refresh'>刷新
        </vxe-button>
        <vxe-button
            type='text'
            class='button-blue'
            @click='handleAdd'
            icon='vxe-icon-square-plus'>新增
        </vxe-button>
        <vxe-button
            type='text'
            class='button-blue'
            @click='saveList'
            icon='vxe-icon-save'>保存
        </vxe-button>
        <vxe-button
            type='text'
            class='button-red'
            @click="handleDelete(currentColonialMorphology.id)"
            icon='vxe-icon-delete'>删除
        </vxe-button>
      </template>
    </vxe-toolbar>
    <div class="colonialMorphologyTable">
      <vxe-table
          ref="colonialMorphologyTableRef"
          v-loading="loading"
          border
          height="100%"
          class="mytable-scrollbar"
          :data="colonialMorphologyList"
          @current-change="colonialMorphologyRowClick"
          :row-config="{ isCurrent: true, isHover: true }"
          :mouse-config="{ selected: true }"
          :keyboard-config="{
          isArrow: true,
          isEnter: true,
          isTab: true,
          isEdit: true,
        }"
          :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
          resizable
          show-overflow
      >
        <vxe-column type="checkbox" width="26"></vxe-column>
        <vxe-column type="seq" title="序号" width="30"></vxe-column>
        <vxe-column
            field="code"
            title="编码"
            width="60px"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row, rowIndex, column }">
            <vxe-input
                v-model="row.code"
                type="text"
                @blur="tableInputBlur(row, rowIndex)"
                @keydown.native.enter="enterEvent(row, rowIndex, column)"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
            field="name"
            title="菌落形态"
            width="120px"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row, rowIndex, column }">
            <vxe-input
                v-model="row.name"
                type="text"
                @blur="tableInputBlur(row, rowIndex)"
                @keydown.native.enter="enterEvent(row, rowIndex, column)"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
            field="inputCode"
            title="输入码"
            width="60"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row, rowIndex, column }">
            <vxe-input
                v-model="row.inputCode"
                type="text"
                @blur="tableInputBlur(row, rowIndex)"
                @keydown.native.enter="enterEvent(row, rowIndex, column)"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
            field="description"
            title="描述"
            width="160"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row, rowIndex, column }">
            <vxe-input
                v-model="row.description"
                type="text"
                @blur="tableInputBlur(row, rowIndex)"
                @keydown.native.enter="enterEvent(row, rowIndex, column)"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
            field="clinicalSignificanceh"
            title="临床意义"
            width="160"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row, rowIndex, column }">
            <vxe-input
                v-model="row.clinicalSignificanceh"
                type="text"
                @blur="tableInputBlur(row, rowIndex)"
                @keydown.native.enter="enterEvent(row, rowIndex, column)"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
            field="seq"
            title="显示顺序"
            min-width="60"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row, rowIndex, column }">
            <vxe-input
                v-model="row.seq"
                type="text"
                @blur="tableInputBlur(row, rowIndex)"
                @keydown.native.enter="enterEvent(row, rowIndex, column)"
            ></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>
<script setup lang='ts'>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {IsEmpty} from '@/utils/common';
import {VxeMessage, VxeNotifyType} from "@/utils/CommonMessage";

let {proxy}: any = getCurrentInstance();
let colonialMorphologyTableRef: any = ref(null);


let loading = ref(false); //查询按钮加载
let colonialMorphologyList: any = reactive([]); //列表
let currentColonialMorphology = reactive({});
let currentRowIndex = ref(0); //索引

let form = reactive({
  searchValue: '',
});

defineExpose({
  colonialMorphologyChange
})
// 页面加载时
onMounted(() => {
  findColonialMorphologyList();

});

function colonialMorphologyChange(nVal) {
  currentColonialMorphology.name = nVal.name;
  save(currentColonialMorphology, currentRowIndex);
}

//获取列表
function findColonialMorphologyList() {
  colonialMorphologyList.length = 0;
  loading.value = true;
  const url = '/bac/germ/morphology/findPageList';
  const data = {
    searchValue: IsEmpty(form.searchValue) ? '' : form.searchValue.trim()
  };
  proxy.$http.get(url, {params: data})
      .then((res: any) => {
        colonialMorphologyList.push(...res.data);
        colonialMorphologyRowClick({row: colonialMorphologyList[0], rowIndex: 0});
        loading.value = false;
      }).catch((err) => {
    loading.value = false;
    VxeMessage('获取列表', VxeNotifyType.error);
  });
}

//查询
function handleSearch() {
  findColonialMorphologyList();
}

//新增性状
function handleAdd() {
  const newRow = {
    id: null,
    code: '',
    name: '',
    inputCode: '',//输入码
    description: '',//描述
    clinicalSignificanceh: '',
    displayOrder: '',
  };
  colonialMorphologyList.unshift(newRow);
  const $table = (proxy.$refs.colonialMorphologyTableRef as any);
  $table.reloadData(colonialMorphologyList);
  $table.setEditRow(newRow);
  $table.setCurrentRow(newRow);
}

// 行点击事件
function colonialMorphologyRowClick({row, rowIndex}) {
  if (IsEmpty(row)) {
    Object.assign({}, currentColonialMorphology);
    proxy.$emit('getColonialMorphologyId', null);
    return;
  }
  currentRowIndex = rowIndex;
  currentColonialMorphology = row;
  const xTable = proxy.$refs.colonialMorphologyTableRef;
  xTable.setCurrentRow(row);
  proxy.$emit('getColonialMorphologyId', currentColonialMorphology.id);
}

//保存
function save(row, index) {
  const data = {
    id: row.id,
    code: row.code,
    name: row.name,
    seq: row.seq,
    inputCode: row.inputCode,
    description: row.description,
  };
  //判断新建和编辑
  const url = '/bac/germ/morphology/saveOrUpdate';
  proxy.$http.post(url, data)
      .then((res: any) => {
        row.id = res.data.id
        colonialMorphologyList.splice(index, 1, res.data);
        loading.value = false;
      }).catch((err) => {
    loading.value = false;
    VxeMessage('保存失败', VxeNotifyType.error);
  });

}

//批量保存
function saveList() {
  const url = '/bac/germ/morphology/saveOrUpdateBatch';
  proxy.$http
      .post(url, colonialMorphologyList)
      .then((res: any) => {
        VxeMessage('保存成功', VxeNotifyType.success);
        findColonialMorphologyList();
      })
      .catch((err) => {
        VxeMessage('保存失败', VxeNotifyType.error);
      });
}

//删除
function handleDelete() {
  const $xTable = proxy.$refs.colonialMorphologyTableRef as any;
  const selectRows = $xTable.getCheckboxRecords();
  if (selectRows.length <= 0) {
    proxy.$XModal.message({content: '请先选中要删除的项', status: 'warning'});
    return;
  }
  proxy.$XModal.confirm('您确定要删除吗？').then(type => {
    if (type === 'confirm') {
      const url = '/bac/germ/morphology/deleteBatch';
      proxy.$http
          .post(url, selectRows)
          .then((res: any) => {
            findColonialMorphologyList();
          })
          .catch((err) => {
            VxeMessage('删除成功', VxeNotifyType.error);
          });
    }
  });
}

// 输入框失去焦点事件
function tableInputBlur(row, index) {
  save(row, index);
}

// 回车切换输入框焦点
function enterEvent(row, rowIndex, column) {
  const $table = (proxy.$refs.colonialMorphologyTableRef as any);
  if ((rowIndex + 1) <= colonialMorphologyList.length - 1) {
    $table.setEditCell(row, column.field);
  }
}

</script>
<style lang='scss' scoped>
@import "@/assets/css/isd-body.scss";

#colonialMorphology {
  height: 100%;

  .colonialMorphologyTable {
    height: calc(100% - 40px);
  }
  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }
}
</style>